<script lang="ts" setup>
import { ref } from "vue";
import { RouterLink } from "vue-router";

const dataList = ref([
  {
    id: 1,
    name: "木棉科技",
    company: "广州木棉网络科技有限公司",
    contact: "陈小庆",
    phone: "13512345678",
    merchantCount: "1000",
    createdAt: "2023-01-15 09:30:00",
  },
  {
    id: 2,
    name: "星辰科技",
    company: "深圳星辰信息技术有限公司",
    contact: "李明",
    phone: "13823456789",
    merchantCount: "850",
    createdAt: "2023-02-20 14:15:30",
  },
  {
    id: 3,
    name: "蓝天数据",
    company: "上海蓝天大数据有限公司",
    contact: "王芳",
    phone: "13934567890",
    merchantCount: "1200",
    createdAt: "2023-03-10 11:45:22",
  },
  {
    id: 4,
    name: "海纳百川",
    company: "北京海纳百川科技发展有限公司",
    contact: "张伟",
    phone: "13645678901",
    merchantCount: "650",
    createdAt: "2023-04-05 16:20:15",
  },
  {
    id: 5,
    name: "东方云服",
    company: "杭州东方云计算服务有限公司",
    contact: "刘静",
    phone: "13756789012",
    merchantCount: "920",
    createdAt: "2023-05-18 09:10:45",
  },
]);
</script>

<template>
  <umrp-container :gap="16" bg-color="#f2f2f2" height="100%" padding="16px">
    <umrp-breadcrumb :items="['商家管理', '服务商列表']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="16">
        <umrp-col :span="6">
          <umrp-form-item label="服务商名称">
            <umrp-input placeholder="请输入服务商的名称"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="6">
          <umrp-form-item label="公司名称">
            <umrp-input placeholder="请输入公司的名称"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="6">
          <umrp-form-item label="联系人">
            <umrp-input placeholder="请输入联系人的姓名"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="6">
          <umrp-form-item label="联系电话">
            <umrp-input placeholder="请输入联系人的电话号码"></umrp-input>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :data="dataList">
        <template #toolbar>
          <router-link :to="{ name: 'MerchantServiceProviderForm' }">
            <umrp-button type="primary">新增</umrp-button>
          </router-link>
        </template>
        <template #columns>
          <umrp-table-column title="编号" data-index="id" :width="80"></umrp-table-column>
          <umrp-table-column title="服务商名称" data-index="name"></umrp-table-column>
          <umrp-table-column title="公司名称" data-index="company"></umrp-table-column>
          <umrp-table-column title="商家数量" data-index="merchantCount" :width="160" :sorter="true"></umrp-table-column>
          <umrp-table-column title="联系人" data-index="contact" :width="160"></umrp-table-column>
          <umrp-table-column title="联系电话" data-index="phone" :width="160"></umrp-table-column>
          <umrp-table-column title="加入时间" data-index="createdAt" :width="200"></umrp-table-column>
          <umrp-table-column slot-name="action" title="操作" :width="120"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <router-link :to="{ name: 'MerchantServiceProviderForm' }">
              <umrp-button type="primary">编辑</umrp-button>
            </router-link>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">删除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #sort>
          <umrp-input-number default-value="0" :width="80"></umrp-input-number>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
</template>
